<template>
	<d2-container>
		<template>
			<div class="form-area">
				<!-- 说明 -->
				<!-- 如果是 左右结构 的布局，一行用一个row，每行由若干个col组成 -->
				<!-- 每行所有col的span值加起来，最大不超过24！ -->
				<!-- 如果不需要左右布局，则不需要用row、col -->
				<el-form ref="addForm" :model="formData" :rules="rules" label-width="100px" style="height:auto">
					<div class="form-title">
						<h3>基本信息</h3>
					</div>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="仓库名称" prop="storeName">
								<el-input type="text" v-model="formData.storeName" placeholder="请输入仓库名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="仓库编号" prop="storeId">
								<el-input type="text" v-model="formData.storeId" placeholder="请输入仓库编号"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="上级仓库" prop="storeArea">
								<el-select v-model="formData.storeArea" placeholder="请选择" style="width: 100%;">
									<el-option label="全部" value=""></el-option>
									<el-option label="南宁仓库1" value="0"></el-option>
									<el-option label="南宁仓库2" value="1"></el-option>
									<el-option label="柳州仓库" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="启用状态" prop="status">
								<el-select v-model="formData.status" placeholder="请选择" style="width: 100%;">
									<el-option label="全部" value=""></el-option>
									<el-option label="是" value="1"></el-option>
									<el-option label="否" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="仓库地址" prop="address">
								<el-input type="text" v-model="formData.address" placeholder="请输入仓库地址"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="form-title">
						<h3>备注信息</h3>
					</div>

					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="备注" prop="remark">
								<el-input type="textarea" :rows="5" v-model="formData.remark" placeholder="请输入备注"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="商品描述" prop="describe">
								<d2-ueditor v-model="formData.describe"></d2-ueditor>
							</el-form-item>
						</el-col>
					</el-row>

					<!-- 提交按钮 -->
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item>
								<div class="form-submit">
									<el-button class="form-submit-btn" type="primary" @click="submit('addForm')">提交</el-button>
									<el-button class="form-cancle-btn">取消</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</template>
	</d2-container>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        storeName: '',
        storeId: '424256476575878678',
        storeArea: '',
        status: '',
        address: '',
        remark: '',
        describe: ''
      },
	  rules: {
		  storeName: [{ required: true, message: '请输入入库单编号', trigger: 'blur' }, { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }],
		  storeArea: [{ required: true, message: '请选择上级仓库', trigger: 'blur' }],
		  status: [{ required: true, message: '请选择启用状态', trigger: 'blur' }],
		  address: [{ required: true, message: '请输入仓库地址', trigger: 'blur' }, { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }]
	  }
    }
  },
  methods: {
	  submit (formName) { // 提交事件
		  this.$refs[formName].validate(valid => {
			  if (valid) {
				  // 做些什么
			  }
		  })
	  }
  }
}
</script>

<style lang="scss" scoped>
	::v-deep .edui-editor-iframeholder.edui-default {
		height: 300px!important;
	}
</style>
